<template>
    <div class="login">
        <h1>Login</h1>
        <form>
            <div>
                <div class="input"  :class=" mail ? 'input-bottom': '' ">
                    <input type="text" placeholder="请输入帐号邮箱" name="mail" v-model="mail" @blur="getmailValue(mail)">
                    <svg class="icon gou mail-gou" aria-hidden="true" v-if="mailGou">
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
                <p class="tip">{{mailTip}}</p>
                <div class="input" :class=" password ? 'input-bottom': '' ">
                    <input :type="pwd" placeholder="请输入密码" name="upassword" v-model="password" @blur="getpwdValue(password)">
                    <div class="login-icon" @click="showEye()">
                        <svg class="icon eye show-eye" aria-hidden="true" v-if="pwd === 'password'">
                            <use xlink:href="#icon-yincang"></use>
                        </svg>
                        <svg class="icon eye " aria-hidden="true" v-if="pwd === 'text'">
                            <use xlink:href="#icon-xianshi"></use>
                        </svg>
                        <svg class="icon gou pwd-gou" aria-hidden="true" v-if="pwdGou">
                            <use xlink:href="#icon-gou"></use>
                        </svg>
                    </div>
                </div>
                <p class="tip">{{pwdTip}}</p>
            </div>
            <div class="exchange">
                <p @click="register()">注册</p>
                <p>忘记密码？</p>
            </div>
        </form>
        <div class="login-footer">
            <button class="login-button" @click="login()" :class=" (mailGou && pwdGou) ? 'sure-login' : ''" :disabled="!mailGou || !pwdGou">
                <span>登录</span>
            </button>
            <div class="other-login">
                <!-- <p>其他方式登录</p>
                <div class="other-login-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shejiaotubiao-03"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { Eecrypt } from '@/utils/aesEncryption'
import { Notify,Toast } from 'vant'
import {login} from '@/api.js'
export default {
    data() {
        return{
          mail:'',
          password:'',
          pwd:'password',
          mailGou:false,
          pwdGou:false,
          mailTip:'',
          pwdTip:'',
        }
    },
    created() {
        
    },
    methods:{
      getmailValue(mail) {
          const emailReg = /^[a-zA-Z0-9_]{2,16}@[a-zA-Z0-9]{2,16}\.com$/
          if(!mail) {
              this.mailTip = '!邮箱不能为空'
              this.mailGou = false
          }else{
              if(!emailReg.test(mail)){
                    this.mailGou = false
                    this.mailTip = '!邮箱输入格式错误'
                }else{
                    this.mailGou = true
                    this.mailTip = ''
                }
          }         
      },
      getpwdValue(password) {
        const passwordReg = /^[a-zA-Z0-9_#$.]{2,16}$/
          if(!password) {
              this.pwdTip = '!密码不能为空'
              this.pwdGou = false
          }else{
              if(!passwordReg.test(password)){
                    this.pwdGou = false
                    this.pwdTip = '!密码格式错误'
                }else{
                    this.pwdGou = true
                    this.pwdTip = ''
                }
          }
      },
      showEye() {
          if(this.pwd === 'password'){
              this.pwd = 'text'
          }else{
              this.pwd = 'password'
          }
      },
      register() {
        this.$router.push('/register')
      },
      async login() {
        Toast.loading({
            duration:0,
            message: '登录中...',
            forbidClick: true,
        })
          let params = new URLSearchParams()
          params.append('mail',this.mail)
          params.append('upassword',Eecrypt(this.password))

          try{
            const { success,data } = await login(params)
                if(success) {
                    if(data.state){
                      Toast.clear()
                      Toast({
                          message:'登录成功',
                          icon:'smile-o'
                      })
                      localStorage.setItem('user',JSON.stringify(this.mail))
                      this.$router.push('/index')
                    } else{
                      Toast.clear()
                      Notify('账号被停用，请联系管理员处理'); 
                    } 
                    
                }  
            } catch(err){
                Toast.clear()
                Notify('账号邮箱或密码错误');     
          }
                  
        }
    }
}
</script>

<style lang="less" scoped>
.login{
    height: 100%;
    width: 100%;
    overflow: hidden;
    h1{
        padding:0px 10px
    }
    padding:50px 30px;
    form {
        margin-top: 30px;
        padding:0px 10px;
        .input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height:35px;
            margin-top: 20px;
            border-bottom: 4px solid #ddd;
            input {
                width: 80%;
                outline: none;
                font-size: 15px;
            }
            .gou {
                width: 1.5em;
                height: 2em;
                }
            .login-icon{
                display: flex;
                .eye{
                width: 2em;
                height: 2em; 
                }
            }
            
        }       
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        .input-bottom {           
	        animation: fadeIn 0.8s;
            border-image: linear-gradient(to right,rgb(230, 97, 185), rgb(245, 207, 35)) 30 20;
        }
        .tip{
            margin-top: 6px;
            height: 20px;
            color: red;
        }
        .exchange{
            display: flex;
            justify-content: space-between;
            color: rgb(124, 124, 124);
        }
    }
    .login-footer{
        text-align: center;
        margin-top: 100px;        
        .login-button{
                font-size: 16px;
                color: white;
                font-weight: bold;
                width: 100%;
                height: 45px;
                border: none;
                border-radius: 6px;
                background: rgb(204, 198, 198);
            }
        .sure-login{
            background: #4895f2;
        }
        .other-login{
            margin:50px 0px;
            font-size: 16px;
            color: rgb(124, 124, 124);
            .other-login-icon{
                margin-top: 30px;
            }
        }
    }
    
   
}
</style>